import React, { Component } from 'react';
import { Modal, Form, Select, Input, Radio, InputNumber,DatePicker } from 'antd';
import PropTypes from 'prop-types';
import moment from "moment/moment";
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class AddModal extends Component{
    layout = {
        labelCol: {
            span: 4
        },
        wrapperCol: {
            span: 20
        }
    }
    constructor(props) {
        super(props);
        this.state = {
            isShow: this.props.info['payType'] === '2',
            displayed: 'none',
            lengthMoney: undefined,
            showText: false,
        };
    }

    onOk = () => {
        const { form: { getFieldsValue, validateFields } } = this.props;
        validateFields((err) => {
            if(err) {
                return;
            }
            const value = getFieldsValue();
            this.setState({
                showText: true,
                value
            })
        })
    }

    onShowOk = () => {
        const { handleOk } = this.props;
        this.setState({
            showText: false,
        })
        handleOk(this.state.value);
    }
    ShowCancel = () => {
        this.setState({
            showText: false,
        })
    }

    renderItem = () => {
        const { isShow } = this.state;
        const { info: { needPayMoney, hadPaidMoney }, form: { getFieldsValue } } = this.props;
        const money = getFieldsValue()['totalMoney'] || 0;
        let surplusMoney = Number(needPayMoney) - Number(hadPaidMoney) - Number(money);
        surplusMoney = Number.isInteger(surplusMoney) ? surplusMoney : surplusMoney.toFixed(2);
        if(!isShow){
            return null;
        }
        return (
            <FormItem label={'减免金额'} {...this.layout}>
                {
                    <div>{surplusMoney}</div>
                }
            </FormItem>
        );
    }

    handleChange = (e) => {
        this.setState({
            isShow: e.target.value === '2'
        });
        let {info:{ payType, totalMoney, id }, data} = this.props
        payType.value = e.target.value
        data.map((item)=>{
            if(item.id = id){
                if(e.target.value === '3'){
                    totalMoney.value = item.lengthMoney
                    this.setState({
                        displayed: 'block',
                        lengthMoney: item.lengthMoney
                    })
                }else{
                    totalMoney.value = 0.01
                    this.setState({
                        displayed: 'none',
                        lengthMoney: undefined
                    })
                }
            }
        })
    }
    afterClose = () => {
        this.setState({
            isShow: false
        });
    }
    
    totalMoney = (value) =>{
        const { form: { getFieldDecorator } } = this.props;
        if(value === '3'){
            return(
                getFieldDecorator('totalMoney', {
                    rules: [
                        { required: true, message: '不能为空' }
                    ]
                })(
                    <InputNumber disabled/>
                )
            )
        }else{
            return(
                getFieldDecorator('totalMoney', {
                    rules: [
                        { required: true, message: '不能为空' }
                    ]
                })(
                    <InputNumber min={0.01}/>
                )
            )
        }
    }

    render() {
        const { visible, form: { getFieldDecorator, getFieldsValue }, handleCancel, info, modalLoading } = this.props;
        const { displayed, lengthMoney } = this.state
        return (
            <div>
                <Modal
                    onOk={this.onOk}
                    onCancel={handleCancel}
                    width={600}
                    visible={visible}
                    title={'添加/修改部门'}
                    confirmLoading={modalLoading}
                    afterClose={this.afterClose}
                >
                    <Form>
                        <FormItem label={'姓名'} {...this.layout}>
                            {
                                <div>{info['userTrueName'] || ''}</div>
                            }
                        </FormItem>
                        <FormItem label={'手机号'} {...this.layout}>
                            {
                                <div>{info['userPhone'] || ''}</div>
                            }
                        </FormItem>
                        <FormItem label={'应还金额'} {...this.layout}>
                            {
                                <div>{info['needPayMoney'] || 0}</div>
                            }
                        </FormItem>
                        <Form.Item {...this.layout} label={'展期金额'} style={{display: displayed}}>
                            {
                                <div>{lengthMoney}</div>
                            }
                        </Form.Item>
                        <FormItem label={'已还金额'} {...this.layout}>
                            {
                                <div>{info['hadPaidMoney'] || 0}</div>
                            }
                        </FormItem>
                        <FormItem label={'还款类型'} {...this.layout}>
                            {
                                getFieldDecorator('payType', {
                                    rules: [
                                        { required: true, message: '不能为空' }
                                    ]
                                })(
                                    <RadioGroup onChange={this.handleChange}>
                                        <Radio value={'1'}>还款</Radio>
                                        {Number(info['status']) === 12 && <Radio value={'2'}>减免还款</Radio>}
                                        <Radio value={'3'}>展期</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <FormItem label={'支付方式'} {...this.layout}>
                            {
                                getFieldDecorator('payName', {})(
                                    <RadioGroup>
                                        <Radio value={'1'}>支付宝</Radio>
                                        <Radio value={'3'}>微信支付</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <Form.Item {...this.layout} label={'还款金额'}>
                            {
                                this.totalMoney(info['payType'].value)
                            }
                        </Form.Item>
                        {
                            this.renderItem()
                        }
                        <Form.Item {...this.layout} label={'交易流水号'}>
                            {
                                getFieldDecorator('payTradeNo', {
                                    rules: [
                                        { required: true, message: '不能为空' },
                                        // { whitespace: true, message: '交易流水号不能出现空白' }
                                    ]
                                })(
                                    <Input placeholder={'请输入交易流水号'}/>
                                )
                            }
                        </Form.Item>
                        <Form.Item {...this.layout} label={'入账时间'}>
                            {
                                getFieldDecorator('payTime', {
                                    rules: [
                                        { required: true, message: '不能为空' }
                                    ]
                                })(
                                    <DatePicker format={'YYYY-MM-DD HH:mm:ss'}/>
                                )
                            }
                        </Form.Item>
                        <FormItem label={'备注'} {...this.layout}>
                            {
                                getFieldDecorator('remark', {})(
                                    <TextArea rows={2}/>
                                )
                            }
                        </FormItem>
                    </Form>
                </Modal>
                <Modal
                    title='确认还款'
                    style={{ top: 200 }}
                    onOk={this.onShowOk}
                    onCancel={this.ShowCancel}
                    width={500}
                    visible={this.state.showText}
                >
                    <Form>
                        <FormItem label={'还款类型'} {...this.layout} style={{color: '#f00'}}>
                            {
                                getFieldsValue()['payType'] === '1' ? '还款' : (getFieldsValue()['payType'] === '2' ? '减免还款': '展期')
                            }
                        </FormItem>
                        <Form.Item {...this.layout} label={'还款金额'} style={{color: '#f00'}}>
                            {
                                getFieldsValue()['totalMoney']
                            }
                        </Form.Item>
                        {
                            this.renderItem()
                        }
                    </Form>
                </Modal>
            </div>
        );
    }
}
AddModal.propTypes = {
    visible: PropTypes.bool,
    handleOk: PropTypes.func,
    handleCancel: PropTypes.func,
    info: PropTypes.object,
    modalLoading: PropTypes.bool,
    onChange: PropTypes.func
};
AddModal.deafultProps = {
    visible: false,
    handleOk(){},
    handleCancel(){},
    info: {},
    modalLoading: false,
    onChange: () => {}
};

export default Form.create({
    mapPropsToFields(props){
        const { info = {} } = props;
        return {
            payType: Form.createFormField({
                ...info['payType'],
                value: info['payType'].value
            }),
            payName: Form.createFormField({
                ...info['payName'],
                value: info['payName'].value
            }),
            totalMoney: Form.createFormField({
                ...info['totalMoney'],
                value: info['totalMoney'].value
            }),
            payTradeNo: Form.createFormField({
                ...info['payTradeNo'],
                value: info['payTradeNo'].value
            }),
            payTime: Form.createFormField({
                ...info['payTime'],
                value: info['payTime'].value
            }),
            remark: Form.createFormField({
                ...info['remark'],
                value: info['remark'].value
            }),
        };
    },
    onFieldsChange(props, changedFields) {
        props.onChange(changedFields);
    },
})(AddModal);